<template>
    <div class="order">
        <div class="top">
            <div class="iconfont icon-zuo1 ret" @click="retu"></div>
            <div class="txt">租房订单</div>
        </div>
        <div class="body">
            <cube-slide ref="slide" :data="items"  :interval="4000" @change="changePage" style="height: 50vw">
                <cube-slide-item v-for="(item, index) in items" :key="index" @click.native="clickHandler(item, index)">
                    <div :style="{
                    width:'100%',
                    height:'100%',
                    backgroundImage:`url(${item.image})`,
                    backgroundPosition:'center center',
                    backgroundSize:'cover',

                    }">
                    </div>
                </cube-slide-item>
            </cube-slide>
            <div class="info">
                <div class="info_a">
                    <div class="info_tit">
                        <div class="title">{{orderlist.house.htitle}}</div>
                        <span class="lit" v-show=" orderlist.pay_money == 1 ? false :true">未支付</span>
                        <div class="lit" v-show=" orderlist.pay_money == 1 ? true :false">已完成</div>
                    </div>
                    <div class="info_tim" v-if="orderlist.pay_money == 1">租约生成时间：<span>{{ new  Date().setTime(orderlist.create_time) | moment('YYYY-MM-DD h:mm:ss a') }}</span></div>
                    <div class="info_tim" v-else>租约生成时间：<span>{{ new  Date().setTime(orderlist.create_time) | moment("from", "now") }}</span></div>
                    <div class="info_lit" v-show=" orderlist.pay_money == 1 ? false :true">
                        租约将在1天后自动取消，请前往支付 <span @click="topay" class="gop">去支付</span>
                    </div>
                    <div class="info_sq">
                        <span class="sq"><span>{{orderlist.house.hsquare}}</span> ㎡</span>
                        <span class="litle" v-show="orderlist.house.sfa == 1 ? true:false">沙发</span>
                        <span class="litle" v-show="orderlist.house.tv == 1 ? true:false">电视</span>
                        <span class="litle" v-show="orderlist.house.xyj == 1 ? true:false">洗衣机</span>
                    </div>
                </div>
                <div class="info_b">
                    <div class="money"><span style="color: #a9a9a9;">租金: </span>{{orderlist.owe}}元/月</div>
                    <div class="ya">押一付一/金额{{orderlist.owe*2}}</div>
                </div>
                <div class="info_c">联系方式: 18978953989</div>
                <div class="info_c">合同租赁时间: {{ new  Date().setTime(orderlist.first_time) | moment('YYYY-MM-DD') }} 至 {{ new  Date(orderlist.last_time).setTime(orderlist.first_time) | moment('YYYY-MM-DD') }}</div>
                <div class="info_c">{{orderlist.house.haddress}} <span style="display: inline-block;float: right" class="iconfont icon-right"></span></div>
                <!--<div class="info_c">同住人: 大美 </div>-->
                <!--<div class="info_c">历史账单 <span style="display: inline-block;float: right" class="iconfont icon-right"></span></div>-->
            </div>
        </div>
    </div>
</template>

<script>

export default {
  name: 'order',
  data() {
    return {
      orderlist: '',
      pay: '',
      order_id: '',
      items: [
        {
          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png',
        },
        {
          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png',
        },
        {
          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png',
        },
      ],
    };
  },
  computed: {
    dtime(){

    }
  },
  async mounted() {
    const _res = await this.$api.post('/user/order', { uid: this.$store.state.userinfo.uid });
    console.log(_res);
    // console.log(_res.data);
    if (!_res.data.state) { /* 当state等于0时,正常state=1   */
      Toast.loading('载入中');
      return false;
    }

    this.orderlist = _res.data.data;
    console.log(this.orderlist.owe);
    this.order_id = _res.data.data.order_id;
  },
  methods: {
    retu() {
      this.$router.push({ name: 'usercenter' });
    },
    topay() {
      this.$router.push({ name: 'pay', query: { order_id: this.order_id } });
    },
    changePage(current) {
      /* console.log(`当前轮播图序号为:${current}`); */
    },
    clickHandler(item, index) {
      /* console.log(item, index); */
    },
  },
};
</script>

<style lang="scss" scoped>
    @import '@/css/public.scss';
    .order{
        display: flex;
        flex-direction:column;
        height: 100%;
        font-family:"Microsoft YaHei";
        .top{
            width: 100%;
            height: vw(50);
            background:$public-color;
            position: relative;
            .ret{
                float: left;
                height: vw(50);
                line-height: vw(50);
                font-size: vw(20);
                margin-left: vw(20);
                color: white;
            }
            .txt{
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                height: vw(50);
                line-height: vw(50);
                font-size: vw(16);
                color: white;
            }

        }
        .body{
            height:0;
            flex-grow:1;
            z-index:1;
            overflow:scroll;
            margin-top: vw(15);
            .info{
                width: 100%;
                height: auto;
                margin-top: vw(10);
                padding-left: vw(22);
                padding-right: vw(22);
                .info_a{
                    width: 100%;
                    min-height: vw(85);
                    height: auto;
                    border-bottom: 1px solid #ededed;
                    padding-bottom: vw(10);
                    .info_tit{
                        width: 100%;
                        height: vw(35);
                        .title{
                            display: inline-block;
                            height: vw(20);
                            width: vw(250);
                            font-size: vw(20);
                            line-height: vw(20);
                            color: #292929;
                            overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;
                        }
                        .lit{
                            width: vw(60);
                            height: vw(20);
                            display: inline-block;
                            margin-left: vw(10);
                            border-radius: vw(10);
                            background-color: #cccccc;
                            color: white;
                            font-size: vw(12);
                            line-height: vw(20);
                            text-align: center;
                        }
                        .time{
                            height: vw(15);
                            width: 100%;
                            text-align: right;
                            line-height: vw(15);
                            font-size: vw(14);
                            padding-right: vw(10);
                        }
                    }
                    .info_tim{
                        font-size: vw(12);
                        color: #a9a9a9;
                        margin-bottom: vw(10);
                    }

                    .info_lit{
                        height: vw(27);
                        line-height: vw(12);
                        font-size: vw(12);
                        text-align: left;
                        color: #9d9d9d;
                        margin-bottom: vw(5);
                        .gop{
                            display: inline-block;
                            font-size: vw(14);
                            height: 100%;
                            line-height: vw(27);
                            color: white;
                            background-color: #ff9800;
                            padding: 0 vw(5);
                            border-radius: vw(15);
                            margin-left: vw(15);
                        }
                    }
                    .info_sq{
                        width: 100%;
                        height: vw(20);
                        .sq{
                            display: inline-block;
                            font-size: vw(12);
                            height: vw(15);
                            line-height: vw(15);
                            span{
                                font-size: vw(16);
                            }

                        }
                        .litle{
                            height: vw(18);
                            background-color: #ffe3e7;
                            font-size: vw(12);
                            line-height: vw(18);
                            text-align: center;
                            padding: 0 vw(5);
                            color: #fc737b;
                            border-radius: 2px;
                            display: inline-block;
                            margin-left: vw(10);


                        }

                    }
                }
                .info_b{
                    width: 100%;
                    height: vw(70);
                    border-bottom: 1px solid #ededed;
                    padding-bottom: vw(12);
                    padding-top: vw(15);

                    .money{
                        height: vw(14);
                        font-size: vw(14);
                        line-height: vw(14);
                        text-align: left;
                        color: #fc6a72;
                        margin-bottom: vw(14);
                    }
                    .ya{
                        height: vw(12);
                        line-height: vw(12);
                        font-size: vw(12);
                        text-align: left;
                        color: #a9a9a9;
                    }
                }
                .info_c{

                    width: 100%;
                    height: vw(40);
                    line-height: vw(40);
                    font-size: vw(14);
                    text-align: left;
                    border-bottom: 1px solid #ededed;
                }
            }

        }
    }


</style>
